import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_douban/config/app_colors.dart';
import 'package:flutter_douban/main_page/class/page/classroom_video_page.dart';
import 'package:flutter_douban/main_page/home/notes/note_detail_page.dart';
import 'package:flutter_douban/main_page/home/video/video_page.dart';
import 'package:flutter_douban/main_page/home/video/window_video_page.dart';
import 'package:flutter_douban/model/class_detail_son_model.dart';
import 'package:flutter_douban/model/cookstep_list_model.dart';
import 'package:flutter_douban/model/note_model.dart';
import 'package:flutter_douban/tool_views/cached_network_Image.dart';
import 'package:ff_stars/ff_stars.dart';
import 'package:flutter_douban/tool_views/photo_ViewScreen.dart';
import 'package:flutter_douban/tool_views/router.dart';

import '../../../main.dart';

class ClassDetailTopCell extends StatefulWidget {
  /// 详情基本信息
  final ClassDetailSonModel model;
  const ClassDetailTopCell({Key? key, required this.model}) : super(key: key);

  @override
  _ClassDetailTopCellState createState() => _ClassDetailTopCellState();
}

class _ClassDetailTopCellState extends State<ClassDetailTopCell> {
  @override
  Widget build(BuildContext context) {
    List list = [
      "http:\/\/i1.douguo.net\/upload\/banner\/0\/b\/5\/800_0b88e96b3103c485e2af7f516a4e3ab5.jpg",
      "http:\/\/i1.douguo.net\/upload\/banner\/6\/1\/4\/800_617a163af2104fabe0d4c5b732aefff4.jpg",
      "http:\/\/i1.douguo.net\/upload\/banner\/f\/b\/a\/800_fb3d877e1300ba0e36b7c93409860e8a.jpg",
      "http:\/\/i1.douguo.net\/upload\/banner\/7\/9\/7\/800_79ebf1a10c8d739f11d375c4b5db8467.jpg"
    ];

    List<CookStepListModel> _dataList = [];
    list.forEach((element) {
      /// 大图浏览模式需要数据
      _dataList.add(CookStepListModel('', element, 0, 0, '', ''));
    });

    List<Widget> rowList = [];
    int i = 0;
    widget.model.notes!.forEach((element) {
      i++;
      if (i > 4) {
        return;
      }
      rowList.add(
        InkWell(
          child: ClipRRect(
            child: CachedImage(
                url: element.image_u!,
                width: (MediaQuery.of(context).size.width - 70) / 4,
                height: (MediaQuery.of(context).size.width - 70) / 4),
            borderRadius: BorderRadius.circular(8),
          ),
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (_) {
              if (element.video_url?.isNotEmpty == true) {
                return WindowVideoPage(
                  playType: PlayType.network,
                  dataSource: element.video_url!,
                  id: int.parse(element.id!),
                );
              } else {
                return NoteDetailPage(
                  id: int.parse(element.id!),
                );
              }
            }));
          },
        ),
      );
      rowList.add(SizedBox(
        width: 10,
      ));
    });

    return Column(
      children: [
        /// 轮播图
        Container(
          height: 240,
          width: MediaQuery.of(context).size.width,
          child: Swiper(
            itemCount: list.length,
            autoplay: true,
            itemBuilder: (BuildContext context, int index) {
              return Image.network(
                list[index],
                fit: BoxFit.cover,
              );
            },

            /// 横线样式
            pagination: SwiperPagination(
              ///指示器显示的位置 Alignment.bottomCenter 底部中间
              alignment: Alignment.bottomCenter,

              /// 距离调整
              margin: const EdgeInsets.only(bottom: 5),

              /// 指示器构建
              builder: DotSwiperPaginationBuilder(

                  /// 点之间的间隔
                  space: 4,

                  /// 没选中时的大小
                  size: 6,

                  /// 选中时的大小
                  activeSize: 8,

                  /// 没选中时的颜色
                  color: Colors.white,

                  ///选中时的颜色
                  activeColor: AppColors.yellow),
            ),
            onTap: (index) {
              Navigator.of(context).push(new FadeRouter(
                  child: PhotoViewGalleryScreen(
                    index: index,
                    dataArr: _dataList,
                  ),
                  duration_ms: 500));
            },
          ),
        ),

        /// 描述文字
        Container(
          margin: EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 15),
          child: Text(widget.model.t!,
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                  fontWeight: FontWeight.bold)),
        ),

        /// 作者信息
        Container(
            alignment: Alignment.center,
            padding: EdgeInsets.only(left: 20, right: 20, bottom: 0),
            height: 34,
            width: MediaQuery.of(context).size.width,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _leftWidget(),
                _rightWidget(),
              ],
            )),

        /// 加入人数
        Container(
          alignment: Alignment.centerLeft,
          margin: EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 0),
          child: Text(widget.model.sales!,
              style: TextStyle(fontSize: 12, color: Colors.black26)),
        ),

        /// 星星
        Container(
          alignment: Alignment.centerLeft,
          margin: EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 0),
          child: Row(
            children: [
              FFStars(
                normalStar:
                    Image.asset("assets/images/common/collcetionicon_off.png"),
                selectedStar:
                    Image.asset("assets/images/common/collcetionicon_on.png"),
                starsChanged: (realStars, choosedStars) {
                  print("实际选择: ${choosedStars}, 最终得分: ${realStars}");
                },
                step: 1.0,

                /// 用于设置半星(0.5), 整星(1.0), 任意星(0.01), 可在0.01 - 1.0之间自定义, 默认值为0.01
                // currentStars: double.parse(widget.model.rate!),
                /// 默认有几颗星星, 默认值为0
                starCount: 5,

                /// 一共有几颗星, 默认值5
                starHeight: 20,

                /// 星星的高度, 默认30
                starWidth: 20,

                /// 星星的宽度,默认30
                starMargin: 5,

                /// 星星间的间距, 默认10
                justShow: true,

                /// 是否仅做展示, 默认false
                rounded: true,

                /// 四舍五入-取最近值, 默认false(进一法)
              ),
              SizedBox(
                width: 15,
              ),
              Text(widget.model.rate!,
                  style: TextStyle(fontSize: 12, color: Colors.black)),
              SizedBox(
                width: 15,
              ),
              Text(widget.model.rate_count.toString() + "人评分",
                  style: TextStyle(fontSize: 12, color: Colors.black26))
            ],
          ),
        ),

        /// 图片
        Container(
          margin: EdgeInsets.only(left: 20, right: 10, top: 20, bottom: 0),
          child: Row(
            children: rowList,
          ),
        ),

        /// 课程表
        Container(
          alignment: Alignment.centerLeft,
          margin: EdgeInsets.only(left: 20, right: 10, top: 15, bottom: 0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("课程表",
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.black,
                      fontWeight: FontWeight.bold)),
              Stack(
                children: [
                  Container(
                    height: 90,
                    margin: EdgeInsets.only(top: 15, bottom: 0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black12,
                            offset: Offset(0.0, 0.0), //阴影xy轴偏移量
                            blurRadius: 10.0, //阴影模糊程度
                            spreadRadius: 2.0 //阴影扩散程度
                            )
                      ],
                    ),
                  ),
                  Positioned(
                    bottom: 25,
                    left: 0,
                    child: Stack(
                      children: [
                        Image.asset(
                          'assets/images/common/course_number_background@2x.png',
                          width: 32,
                          height: 40,
                          color: Color.fromRGBO(153, 152, 153, 1),
                        ),
                        Positioned(
                            left: 8,
                            top: 5,
                            child: Text("1",
                                style: TextStyle(
                                    fontSize: 22,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold)))
                      ],
                    ),
                  ),
                  Positioned(
                      bottom: 25,
                      left: 50,
                      child: Column(
                        children: [
                          Text("炸麻叶",
                              style: TextStyle(
                                fontSize: 16,
                                color: Colors.black,
                              )),
                          SizedBox(
                            height: 5,
                          ),
                          Text("时长: 1小时",
                              style:
                                  TextStyle(fontSize: 12, color: Colors.grey))
                        ],
                      )),
                  Positioned(
                      bottom: 25,
                      right: 20,
                      child: InkWell(
                        child: Column(
                          children: [
                            Image.asset(
                              'assets/images/common/living@2x.png',
                              width: 26,
                              height: 26,
                            ),
                            SizedBox(
                              height: 4,
                            ),
                            Text("观看",
                                style: TextStyle(
                                    fontSize: 13, color: Colors.black))
                          ],
                        ),
                        onTap: () {
                          // print('哈哈哈哈哈${((MediaQuery.of(context).size.height/MediaQuery.of(context).size.width)*100)}');
                          Navigator.of(context)
                              .push(MaterialPageRoute(builder: (_) {
                            return ClassVideoPage(
                              video_url:
                                  'https://vplay.douguo.com/douguo-live15431971906270c1680s2435_dg_sv__360x640.mp4?t=1634262650',
                              video_cover_height: 150.toString(),
                              video_cover_width: 100.toString(),
                            );
                          }));
                        },
                      )),
                ],
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _rightWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          width: 60,
          height: 28,
          child: TextButton(
            onPressed: () => print(''),
            child: Text(
              '关注',
              style: TextStyle(
                color: Colors.black,
                fontSize: 12,
                fontWeight: FontWeight.bold,
              ),
            ),
            // color: AppColors.yellow,
            // shape: RoundedRectangleBorder(
            //     side: BorderSide(
            //       color: AppColors.yellow,
            //       width: 0.5,
            //     ),
            //     borderRadius: BorderRadius.circular(15)),
          ),
        ),
      ],
    );
  }

  Widget _leftWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 34,
          height: 34,
          decoration: BoxDecoration(
            color: AppColors.page,
            borderRadius: BorderRadius.circular(17),
          ),
          child: ClipOval(
            child: FadeInImage.assetNetwork(
              placeholder: 'assets/images/common/lazy-1.png',
              image: widget.model.ua!,
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(
          width: 8,
        ),
        Container(
          constraints: BoxConstraints(
            maxWidth: 120,
            maxHeight: 20,
          ),
          child: Text(
            widget.model.un!,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 13,
              fontWeight: FontWeight.bold,
              color: AppColors.black,
            ),
          ),
        ),
        SizedBox(
          width: 12,
        ),
        Text(
          'LV.6',
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              fontSize: 11,
              color: AppColors.yellow,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.bold),
        ),
      ],
    );
  }
}
